var layer = layui.layer;
// 1. 添加类别 - 
// 添加弹窗 - 要用在弹窗中的字符串, 所以没写在标签里
var add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
<div class="layui-form-item">
  <label class="layui-form-label">类别名称</label>
  <div class="layui-input-block">
    <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <label class="layui-form-label">类别别名</label>
  <div class="layui-input-block">
    <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  </div>
</div>
</form>`;

// 添加按钮 - 点击事件
$(".add").click(function () {
    // 弹窗  layer.open({})
    layer.open({
        type: 1, // 页面层
        title: '添加类别',
        content: add_str,
        area: ['500px', '250px'],
        // 层创建完毕时
        success: function (layero, index) {
            // index: number值，layer专门关闭用这个索引！
            // 注册提交事件
            $("#add_form").on("submit", function (e) {
                e.preventDefault();
                // 收集数据:
                var data = $(this).serialize();
                // 提交
                addCategoryAPI(data, () => {
                    // 重新请求当前页面数据 - 完成铺设
                    load();
                    // 关闭弹出层
                    layer.close(index);
                });
            });
        }
    });
});

// 2. 获取类别数据
function load() {
    getCategoryAPI({}, res => {
        var { data: arr } = res.data;
        $(".layui-table tbody").empty();
        arr.forEach(obj => {
            var theTr = `<tr>
            <td>${obj.name}</td>
            <td>${obj.alias}</td>
            <td>
              <button myid="${obj.Id}" data-name="${obj.name}" data-alias="${obj.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>
    
              <button myid="${obj.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
            </td>
          </tr>`;
            $(".layui-table tbody").append(theTr);
        })
    })
}
load();


// 3. 编辑分类
// 也要用在弹窗上面
var edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`;
var form = layui.form;
// 事件委托 - 编辑按钮 - 点击事件
$(".layui-table tbody").on("click", ".edit", e => {
    // 点击后，获取id值；
    var id = $(e.target).attr("myid");
    // 获取分类名字 - 分类别名
    var name = $(e.target).data("name");
    var alias = $(e.target).data("alias");
    // 展示弹出模态窗
    layer.open({
        type: 1,
        title: '编辑类别',
        content: edit_str,
        area: ['500px', '250px'],
        // 层创建完毕时,里面有显示获取到数据
        success: function (layero, index) {
            // 快速的铺设form标签下的各种表单标签
            // 标签的name值 和 对象里的key匹配, 相当就把对象的值赋予给这个标签的value
            form.val("edit", {
                Id: id,
                name,
                alias
            });

            // 注册提交事件
            $("#edit_form").on("submit", function (e) {
                e.preventDefault();

                var data = $(this).serialize();
                changeCategoryAPI(data, () => {
                    // 重新请求当前页面数据 - 完成铺设
                    load();
                    // 关闭弹出层
                    layer.close(index);
                });
            })
        }
    });
});


// 4. 删除分类
$(".layui-table tbody").on("click", ".delete", function (e) {
    // 获取id；初始化的时候，需要把id和删除按钮绑定在一起；
    var id = $(e.target).attr("myid");

    // 发送删除请求
    delCategoryAPI({
        id
    }, () => {
        load(); // 删除成功重新加载一下
    });
});